<template>
	<view class="px-2 d-flex flex-column position-relative pb-5" style="height: 100vh; overflow: hidden;">
		<view class="position-fixed top-0 left-0 w-100 h-100" v-if="showFullScreen" style="z-index: 99;">
			<fullScreen :showFullScreen.sync="showFullScreen" :keyVal="key" :info="info" />
		</view>
		<view class="flex-center py-1 font text-danger" hover-class="text-primary" v-if="isShowTypeInfo">
			<text @tap="opServerInfo">{{ info.projectTitle || keyobj[key] }}服务详情</text>
		</view>

		<scroll-view scroll-y="true" style="height: calc(100vh - 140px);" :scroll-top="formScrollTop" scroll-with-animation>
			<view class="px-2">
				<u-form :model="form" ref="uForm" :error-type="errortype" label-width="140">
					<u-form-item :label="typeLabel" v-if="list.length > 0" label-width="200">
						<u-input :placeholder="placeholder" disabled @click="show = true" />
						<u-select v-model="show" mode="single-column" z-index="999" :list="list" @confirm="confirm"></u-select>
					</u-form-item>

					<u-form-item label="联系人" prop="contactName" required><u-input v-model="form.contactName" placeholder="请输入联系人" /></u-form-item>
					<u-form-item label="联系电话" prop="contactPhone" required>
						<u-input v-model="form.contactPhone" placeholder="请输入联系电话" type="number" :maxlength="11" />
					</u-form-item>
					<u-form-item label="服务需求" prop="demand" required><u-input v-model="form.demand" placeholder="请输入服务需求" /></u-form-item>
					<u-form-item label="单位名称" prop="company"><u-input v-model="form.company" placeholder="请输入单位名称" /></u-form-item>

					<u-form-item label="单位详址" prop="fixAddress"><u-input v-model="form.fixAddress" placeholder="请输入单位详址" /></u-form-item>

					<u-form-item label="备注" prop="fixContent" label-position="top" label-align="left">
						<u-input type="textarea" height="200" v-model="form.fixContent" border placeholder="请输入备注" maxlength="200" />
					</u-form-item>

					<u-form-item label="图片上传">
						<u-upload
							:action="action"
							:header="header"
							:before-upload="beforeUpload"
							@on-success="uploadSuccess"
							@on-remove="fileRemove"
							max-count="1"
							:form-data="formData"
						></u-upload>
					</u-form-item>
				</u-form>
				<view class="d-flex j-end" @tap="callBackCallPhone('19179169832')">
					{{ info.projectTitle || keyobj[key] }} 
					<text class="ml-1">客服电话：19179169832</text>
				</view>
			</view>
		</scroll-view>

		<view class="position-absolute left-0 px-2" :style="show ? 'display:none;' : ''" style="width: 100%; bottom:80rpx;">
			<u-button type="error" :loading="isGo" ripple @click="nowSubmit">提交申请</u-button>
		</view>
	</view>
</template>

<script>
import fullScreen from '@/components/common/fullScreen.vue';

import { vrFixAdd, vrCmsAdd, appointmentList } from '@/api/property/property.js';
import { active } from '@/api/loadFile.js';
import { serveProjectfindById, serveProjectByID } from '@/api/enterprise/index.js';

import { keyobj } from './dataList.js';
export default {
	components: {
		fullScreen
	},
	data() {
		return {
			isShowTypeInfo:true,
			formScrollTop: 0,
			info: {},
			typeLabel: '',
			placeholder: '',
			show: false, // 列选择器状态
			list: [], // 列选择器数据对象
			showFullScreen: false, //提示框状态
			key: '', // 页面跳转标示
			id: '', // 服务传递过来的id
			isGo: false, // 是否提交
			action: active,
			errortype: ['border-bottom', 'toast'],
			formData: {
				src: ''
			},
			header: {
				token: uni.getStorageSync('token') || '',
				Cookie: uni.getStorageSync('token') || ''
			},
			form: {
				contactName: '',
				contactPhone: '',
				fixAddress: '',
				company: '',
				demand:'',
				fixContent: '',
				fixImg: '',
				fixType: ''
			},
			rules: {
				contactName: [
					{
						required: true,
						message: '请输入联系人姓名',
						trigger: ['change', 'blur']
					},
					{
						min: 2,
						max: 4,
						message: '名字不能少于2字，并多于4字',
						trigger: 'change'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.chinese(value);
						},
						message: '请输入中文名字',
						trigger: ['change', 'blur']
					}
				],
				demand: [
					{
						required: true,
						message: '请输入服务需求',
						trigger: ['change', 'blur']
					}
				],
				contactPhone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}
				]
				// fixAddress: [
				// 	{
				// 		required: true,
				// 		message: '请输入详细地址',
				// 		trigger: ['change', 'blur']
				// 	}
				// ],
				// fixContent: [
				// 	{
				// 		max: 200,
				// 		required: true,
				// 		message: '请输入描述',
				// 		trigger: ['change', 'blur']
				// 	}
				// ]
			},
			keyobj
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(op) {
		console.log(op);
		if (op.key) {
			this.key = op.key;

			uni.setNavigationBarTitle({
				title: this.keyobj[op.key] || ''
			});
			this.placeholder = `请选择${this.keyobj[op.key]}类型`;

			this.typeLabel = `${this.keyobj[op.key]}类型`;
			if (op.key === 'baoxiu') {
				this.list = [{ value: '水', label: '水' }, { value: '电', label: '电' }];
			} else if (op.key === 'cg') {
				this.showFullScreen = false
				this.isShowTypeInfo = false
				// 公共服务 区域
				// this.setggtype()
			}
		} else if (op.id) {
			this.id = op.id;
			this.setInfoByid(+op.id);
		}

		if (this.key !== 'cg') {
			this.showFullScreen = true;
		} else {
			this.showFullScreen = false;
		}
	},
	methods: {
		// async setggtype() {
		// 	const res = await appointmentList();
		// 	console.log(res);
		// },
		async setInfoByid(id) {
			// 人才服务类型
			const { result: res } = await serveProjectfindById(id);
			this.info = res;
			
			if(!res.projectSynopsis){
				this.showFullScreen = false
				this.isShowTypeInfo = false
			}
			uni.setNavigationBarTitle({
				title: res.projectTitle || ''
			});
			this.placeholder = `请选择${res.projectTitle}类型`;
			this.typeLabel = `${res.projectTitle}类型`;
			this.setOptionsList(res.projectId);
		},
		confirm(e) {
			// 获取报修类型
			this.placeholder = e[0].label;
			console.log(e);
			this.form.fixType = e[0].value;
		},
		async setOptionsList(projectId) {
			// 获取服务子集信息
			const { result: res } = await serveProjectByID(projectId);
			res.forEach(v => {
				this.list.push({ label: v.projectTitle, value: v.projectId, id: v.projectId });
			});
		},
		add(form) {
			// 添加申请
			if (this.key) {
				switch (this.key) {
					case 'baoxiu':
						this.addbaoxiu(form);
						break;
					case 'cg':
						this.addcg(form);
						break;
					default:
						null;
				}
			} else if (this.info.projectId) {
				this.addVrCms(this.info.projectId, form);
			}
		},
		addcg(form) {  // 添加参观服务
			this.isGo = false;
			this.$refs.uForm.resetFields();
			uni.showToast({
				title: '添加成功',
				success: () => {
					uni.switchTab({
						url:'/pages/property/property'
					})
				}
			});
		},
		async addVrCms(projectId, form) {
			let params = {
				linkman: form.contactName,
				phone: form.contactPhone,
				companySite: form.fixAddress,
				company: form.company,
				remark: form.fixContent,
				filePath: form.fixImg
			};
			if (form.fixType) {
				params.projectType = form.fixType;
			} else {
				params.projectType = projectId;
			}
			const res = await vrCmsAdd(params);
			if (res.flag) {
				this.isGo = false;
				this.$refs.uForm.resetFields();
				uni.showToast({
					title: '添加成功',
					success: () => {
						uni.switchTab({
							url:'/pages/property/property'
						})
					}
				});
			} else {
				this.isGo = false;
				this.$u.toast(res.message);
			}
		},
		addbaoxiu(form) {
			// 添加报修单
			vrFixAdd(form).then(res => {
				if (res.flag) {
					this.isGo = false;
					this.$refs.uForm.resetFields();
					uni.showToast({
						title: '添加成功',
						success: () => {
							uni.switchTab({
								url:'/pages/property/property'
							})
						}
					});
				} else {
					this.isGo = false;
					this.$u.toast(res.message);
				}
			});
		},
		nowSubmit() {
			// 提交申请单
			if (this.isGo) return;
			// 第一次提交状态
			const form = this.fromTrim(this.form);
			this.$refs.uForm.validate(valid => {
				if (this.list.length > 0 && !form.fixType) {
					uni.showToast({
						title: `请选择服务类型`,
						icon: 'none'
					});
					this.formScrollTop++;
					return;
				}

				if (valid) {
					// if (this.key === 'baoxiu') {
					this.isGo = true;
					this.add(form);
				} else {
					this.formScrollTop++;
					this.isGo = false;
				}
			});
		},
		beforeUpload(index, list) {
			// 图片上传前
			uni.getFileSystemManager().readFile({
				filePath: list[0].url,
				encoding: 'base64',
				success: r => {
					let base64 = r.data;
					this.formData.src = base64;
				}
			});
			//
		},
		uploadSuccess(data) {
			// 图片上传成功
			console.log(data);
			if (data.flag) {
				this.form.fixImg = data.result;
			} else {
				this.$u.toast('上传失败！');
			}
		},
		fileRemove() {
			// 图片移除
			this.form.fixImg = '';
		},
		// 表单数据两头
		fromTrim(form) {
			let flag = true;
			for (let key in form) {
				if (form[key] instanceof String) {
					form[key] = form[key].trim();
				}
			}
			return form;
		},
		nullSubmit() {
			this.$u.toast('提交成功');
			this.$refs.uForm.resetFields();
			uni.navigateBack({
				delta: 1
			});
			this.isGo = false;
		},
		opServerInfo() {
			// 服务详情开关
			this.showFullScreen = true;
		},
		callBackCallPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {},
				fail: err => err
			});
		}
	}
};
</script>

<style></style>
